<template>
  <div class="container">
    <!-- 广告 -->
    <app-header></app-header>

    <!-- 顶部电影基本信息 传递参数：movieInfo -->
    <movie-desc v-if="movieInfo" :movieInfo="movieInfo">
    </movie-desc>

    <!-- 简介区域开始 -->
    <div @click="isOpen = !isOpen" class="introduction" bindtap="tapIntro">
      <!-- <div :class="`${isOpen ? '' : 'line-clamp'}`" v-if="movieInfo" v-html="movieInfo.description">
      </div> -->
      <div :class="{ 'line-clamp': !isOpen }" v-if="movieInfo" v-html="movieInfo.description">
      </div>
      <div class="more">
        <img :src="require(`@/assets/icon/arrow_${isOpen ? 'up' : 'down'}.png`)">
        <img v-show="isOpen" src="@/assets/icon/arrow_up.png">
        <img v-show="!isOpen" src="@/assets/icon/arrow_down.png">

      </div>
    </div>
    <!-- 简介区域结束 -->
    <!-- 演职人员开始 -->
    <div class="actors">
      <div class="title">演职人员</div>
      <div class="actors-list">


        <!-- 遍历导演表 -->
        <div class="actors-item" v-for="item in directors" :key="item.name">
          <img :src="item.avatar">
          <text>导演：{{ item.name }}</text>
        </div>
        <!-- 遍历演员表 -->
        <div class="actors-item" v-for="item in actors" :key="item.name">
          <img :src="item.avatar">
          <text>{{ item.name }}</text>
        </div>

      </div>
    </div>
    <!-- 演职人员结束 -->
    <!-- 剧照开始 -->
    <div class="photos">
      <div class="title">视频和剧照</div>
      <div class="photos-list">

        <!-- 遍历剧照列表 -->
        <div @click="previewImage(i)" class="photos-item" v-for="(item, i) in thumbs" :key="item">
          <img :src="item" style="object-fit: cover;">
        </div>

      </div>
    </div>
    <!-- 剧照结束 -->
    <app-footer></app-footer>
    <div style="height: 50px"></div>
    <!-- 提示若热映类别则显示购票，若待映类别则显示暂未上映，若经典类别则什么都不显示 -->
    <div class="buyblock">
      <van-button round type="danger" block @click="$router.push('/cinema-selection/' + id)">特惠购票</van-button>
      <!-- <van-button round type="danger" disabled block>暂未上映</van-button> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import httpApi from '@/http';
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import Movie from '@/types/Movie'
import Staff from '@/types/Staff'
const $route = useRoute()  // 当前路由对象 
const id = $route.params.id
console.log("当前的电影id：" + id)

import { showImagePreview } from 'vant'
import 'vant/es/image-preview/style'

// 大图浏览剧照图片-------------------------------------------------
function previewImage(index: number) {
  const urls = thumbs.value
  // 应该想办法将每一个路径后的@参数去掉，保留源图路径，再显示
  const newUrls: string[] = []
  urls.forEach(item => {
    let newUrl = item.substring(0, item.lastIndexOf("@"))
    newUrls.push(newUrl)
  });
  showImagePreview({ images: newUrls, startPosition: index })
}



// 处理详情信息的展开与收起 -----------------------------------------
const isOpen = ref(false)  // 绑定是否是展开状态


// 页面挂载完毕后，获取参数id，加载详细数据----------------------------
const movieInfo = ref<Movie>()
const actors = ref<Staff[]>([])
const directors = ref<Staff[]>([])
const thumbs = ref<string[]>([])
onMounted(() => {
  httpApi.movieApi.queryById({ id }).then(res => {
    console.log("获取详情数据:", res)
    // 将res.data.data 保存为响应式对象  更新UI
    movieInfo.value = res.data.data
    // 单独处理 actors 与 directors 属性 保存到响应式对象
    // {"avatar":"https:meituan.net07200.jpg","name":"6960"}
    actors.value = JSON.parse(res.data.data.actor)
    directors.value = JSON.parse(res.data.data.director)
    thumbs.value = JSON.parse(res.data.data.thumb)
    // console.log(thumbs.value)
  })
})


</script>

<style scoped>
.buyblock {
  padding: 10px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
}

.container {
  background-color: #f5f5f5;
}

.movie-detail {
  overflow: hidden;
  z-index: 1;
  height: 188px;
  position: relative;
  cursor: pointer;
}

.movie-detail .movie-filter {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: #333;
}

.poster-background {
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  position: absolute;
  -webkit-filter: blur(1.2rem);
  filter: blur(1.2rem);
  background-size: cover;
  background-repeat: no-repeat;
  opacity: .55;
}

.movie-detail .detail {
  height: 150px;
  padding: 19px 30px 19px 15px;
}

.movie-detail .detail {
  display: flex;
  height: 150px;
  padding: 19px 30px 19px 15px;
}

.movie-detail .detail .poster img {
  width: 110px;
  height: 150px;
  box-sizing: border-box;
}

.movie-detail .detail .content {
  flex: 1;
  overflow-x: hidden;
  margin-left: 12.5px;
  line-height: 1;
  color: #fff;
}

.movie-detail .detail .content .title {
  font-size: 20px;
  margin-top: 2px;
  font-weight: 700;
  overflow: hidden;
}

.line-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.movie-detail .detail .content .score {
  font-size: 18px;
  font-weight: 700;
  color: #fc0;
  margin-top: 17px;
}

.movie-detail .detail .content .type {
  margin-top: 17px;
  font-size: 12px;
  color: #fff;
  opacity: .8;
}

.introduction {
  padding: 10px;
  font-size: 16px;
  background-color: #fff;
}

.line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  line-height: 24px;
}

.introduction .more {
  text-align: center;
}

.introduction .more img {
  width: 10px;
  height: 10px;
}

.actors {
  margin-top: 10px;
  padding: 10px;
  font-size: 16px;
  background-color: #fff;
}

.actors .title {
  margin-bottom: 10px;
  font-size: 16px;
}

.actors .actors-list {
  display: flex;
  flex-direction: row;
  overflow: scroll;
}

.actors .actors-list::-webkit-scrollbar {
  display: none;
}

.actors .actors-list .actors-item {
  width: 80px;
  display: inline-block;
  margin-right: 10px;
  flex-shrink: 0;
}

.actors .actors-list img {
  margin-bottom: 10px;
  display: block;
  width: 100%;
  height: 112px;
  border-radius: 2px;
}

.actors .actors-list text {
  display: block;
  text-align: center;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.photos {
  margin-top: 10px;
  padding: 10px;
  font-size: 16px;
  background-color: #fff;
}

.photos .title {
  margin-bottom: 10px;
  font-size: 16px;
}

.photos .photos-list {
  display: flex;
  flex-direction: row;
  overflow: scroll;
}

.photos .photos-list::-webkit-scrollbar {
  display: none;
}

.photos .photos-list .photos-item {
  width: 140px;
  height: 93px;
  display: inline-block;
  margin-right: 10px;
  flex-shrink: 0;
}

.photos .photos-list .photos-item img {
  width: 100%;
  height: 100%;
  float: left;
}

/*  */
.comments {
  margin-top: 10px;
  background-color: #fff;
}

.comment-item {
  padding: 15px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.comment-item .avatar {
  height: 34px;
  width: 34px;
  border-radius: 34px;
}

.comment-item .right {
  margin-left: 11px;
  flex-grow: 1;
}

.comment-item .comment-content {
  font-size: 15px;
  color: #333;
  line-height: 21px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  text-overflow: ellipsis;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
}
</style>